<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor">
			<block slot="content">分享赚钱</block>
		</cu-custom>
		<view class="banner-bg" :style="{ paddingTop: CustomBar + 'px' }"></view>
		<view class="invite-info">
			<view class="flex flex-direction align-center">
				<view class="text-xxl text-bold text-green">0</view>
				<view class="margin-top-sm">
					<uni-icons type="person" size="16" color="#000"></uni-icons>
					我推荐的好友(人)
				</view>
			</view>
			<view class="delimiter"></view>
			<view class="flex flex-direction align-center">
				<view class="text-xxl text-bold text-green">0</view>
				<view class="margin-top-sm">
					<view class="">
						<text class="cuIcon-moneybag"></text>
						分享奖励(元)						
					</view>
					<view class="text-green flex align-center justify-center"
						@tap="$tools.to('/pages/user/withdraw')">
						去提现
						<uni-icons type="right" size="16" color="rgb(0, 123, 70)"></uni-icons>
					</view>
				</view>
			</view>
			<view class="delimiter"></view>
			<view class="flex flex-direction align-center">
				<view class="text-xxl text-bold text-green">0</view>
				<view class="margin-top-sm">
					<text class="cuIcon-moneybag"></text>
					累计奖励(元)
				</view>
			</view>
		</view>
		<view class="margin padding bg-white radius-sm">
			<view class="text-lg">
				好友下单 获取奖励
			</view>
			<view class="invite-rules">
				<view class="margin-tb-sm text-gray" v-for="(rule, index) in 5" :key="index">
					{{index+1}}.分享给好友注册下单，且店长上门测量后即可获取奖励
				</view>
			</view>
			<view class="invite-step">
				<view class="step-item">
					<image class="step-img" src="/static/img/none.png" mode="aspectFit"></image>
					<view class="step-icon">
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<text>成为福筑家来合伙人</text>
				</view>
				<view class="step-item">
					<image class="step-img" src="/static/img/none.png" mode="aspectFit"></image>
					<view class="step-icon">
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<text>成为福筑家来合伙人</text>
				</view>
				<view class="step-item">
					<image class="step-img" src="/static/img/none.png" mode="aspectFit"></image>
					<view class="step-icon">
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<text>成为福筑家来合伙人</text>
				</view>
				<view class="step-item">
					<image class="step-img" src="/static/img/none.png" mode="aspectFit"></image>
					<view class="step-icon">
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<text>成为福筑家来合伙人</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="cu-btn flex-sub lg round bg-green margin-lr-sm" open-type="share">分享到微信好友</button>
			<button class="cu-btn flex-sub lg round bg-green margin-lr-sm">生成海报</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollColor: 'rgba(255, 255, 255, 0)',
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
		min-height: 100vh;
		padding-bottom: calc(120rpx + constant( safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env( safe-area-inset-bottom));
	}
	.banner-bg {
		background-image: linear-gradient(rgb(0, 123, 70), rgb(247, 247, 247));
		height: 320rpx;
		box-sizing: content-box;
	}
	.invite-info {
		margin: -200rpx 30rpx 30rpx;
		padding: 30rpx 10rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.invite-info [class*="cuIcon-"] {
		line-height: 1.5;
	}
	.delimiter {
		height: 100rpx;
		width: 2rpx;
		background-color: #c9c9c9;
		margin: 0 10rpx;
	}
	
	.invite-step {
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	.invite-step::after {
		content: "";
		position: absolute;
		display: block;
		width: calc(100% - 150rpx);
		height: 4rpx;
		background-color: rgb(196, 233, 217);
		top: calc(120rpx + 10rpx + 30rpx / 2 - 4rpx / 2);
		left: 50%;
		transform: translateX(-50%);
	}
	.step-img {
		width: 150rpx;
		height: 120rpx;
	}
	.step-icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: rgb(46, 151, 106);
		margin: 10rpx 0;
	}
	.step-item {
		position: relative;
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		z-index: 9;
	}
	.footer {
		position: absolute;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 30rpx;
		height: 100rpx;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: content-box;
		padding-bottom: constant( safe-area-inset-bottom);
		padding-bottom: env( safe-area-inset-bottom);
	}
</style>